<template>
  <div class="adtest">
    <div class="container">
      <div class="grow">
        <div class="table-box">
          <box-component title="返乡人员来源地分析">
            <template #content>
              <div class="double-box" style="height: 100%">
                <div class="item">
                  <h4 style="text-align: center; margin-top: 20px">省内</h4>
                  <div class="line" style="font-size: 14px; font-weight:600;margin-top: -10px;">
                    <div style="flex: 0.5">序号</div>
                    <div style="flex: 1">地市名称</div>
                    <div style="flex: 0.8">返乡人数</div>
                  </div>
                  <div style="height: 70%; font-size: 14px; overflow: auto" id="tableList1">
                    <div
                      :class="{ line: true, lineColor: index % 2 === 1 }"
                      v-for="(item, index) in tableData"
                      :key="index"
                      ref="tableRef"
                    >
                      <div style="flex: 0.5" class="circle-box">
                        <div class="circle">{{ index + 1 }}</div>
                      </div>
                      <div style="flex: 1">{{ item.placeName }}</div>
                      <div style="flex: 0.8">{{ item.placeType }}</div>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <h4 style="text-align: center">省外</h4>
                  <div class="line" style="font-size: 14px; font-weight:600;margin-top: -10px;">
                    <div style="flex: 0.5">序号</div>
                    <div style="flex: 1">地市名称</div>
                    <div style="flex: 0.8">返乡人数</div>
                  </div>
                  <div style="height: 70%; font-size: 14px; overflow: auto" id="tableList2">
                    <div
                      :class="{ line: true, lineColor: index % 2 === 1 }"
                      v-for="(item, index) in tableData"
                      :key="index"
                      ref="tableRef"
                    >
                      <div style="flex: 0.5" class="circle-box">
                        <div class="circle">{{ index + 1 }}</div>
                      </div>
                      <div style="flex: 1">{{ item.placeName }}</div>
                      <div style="flex: 0.8">{{ item.placeType }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </box-component>
        </div>
        <div class="table-box">
          <box-component title="各乡镇返乡情况">
            <template #content>
              <div class="line" style="font-size: 14px; font-weight:600;">
                <div style="flex: 0.5">序号</div>
                <div style="flex: 1">乡镇名称</div>
                <div style="flex: 0.8">返乡人数</div>
                <div style="flex: 0.8">占比</div>
              </div>
              <div style="height: 90%; font-size: 14px; overflow: auto" id="tableList3">
                <div
                  :class="{ line: true, lineColor: index % 2 === 1 }"
                  v-for="(item, index) in tableData"
                  :key="index"
                  ref="tableRef"
                >
                  <div style="flex: 0.5" class="circle-box">
                    <div class="circle">{{ index + 1 }}</div>
                  </div>
                  <div style="flex: 1">{{ item.placeName }}</div>
                  <div style="flex: 0.8">{{ item.placeType }}</div>
                  <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
                </div>
              </div>
            </template>
          </box-component>
        </div>
      </div>
      <div class="grow">
        <div class="table-box">
          <div class="content-box">
            <div class="content-item">
              <img src="@/assets/r1.png" />
              <span class="content-desc">返乡总人数</span>
              <div class="count">
                3,2256
                <span>人</span>
              </div>
            </div>
            <div class="line">
              <img src="@/assets/lin.png" />
            </div>
            <div class="content-item">
              <img src="@/assets/r1.png" />
              <span class="content-desc">火车站返乡人数</span>
              <div class="count">
                3,2256
                <span>人</span>
              </div>
            </div>
            <div class="line">
              <img src="@/assets/lin.png" />
            </div>
            <div class="content-item">
              <img src="@/assets/r1.png" />
              <span class="content-desc">汽车站返乡人数</span>
              <div class="count">
                3,2256
                <span>人</span>
              </div>
            </div>
            <div class="content-item">
              <img src="@/assets/r1.png" />
              <span class="content-desc">高速口返乡人数</span>
              <div class="count">
                3,2256
                <span>人</span>
              </div>
            </div>
            <div class="line">
              <img src="@/assets/lin.png" />
            </div>
            <div class="content-item">
              <img src="@/assets/r1.png" />
              <span class="content-desc">七天内有发热、咳嗽<br/>等不适症人数</span>
              <div class="count">
                3,2256
                <span>人</span>
              </div>
            </div>
            <div class="line">
              <img src="@/assets/lin.png" />
            </div>
            <div class="content-item">
              <img src="@/assets/r1.png" />
              <span class="content-desc">七天内到达过<br/>中高风险地区人数</span>
              <div class="count">
                3,2256
                <span>人</span>
              </div>
            </div>
          </div>
        </div>
        <div class="table-box">
          <box-component title="返乡人员场所轨迹">
            <template #content>
              <div class="line" style="font-size: 14px; font-weight:600;">
                <div style="flex: 0.5">序号</div>
                <div style="flex: 1">场所名称</div>
                <div style="flex: 0.8">场所类型</div>
                <div style="flex: 0.8">返乡人员扫场所码次数</div>
              </div>
              <div style="height: 90%; font-size: 14px; overflow: auto" id="tableList4">
                <div
                  :class="{ line: true, lineColor: index % 2 === 1 }"
                  v-for="(item, index) in tableData"
                  :key="index"
                  ref="tableRef"
                >
                  <div style="flex: 0.5" class="circle-box">
                    <div class="circle">{{ index + 1 }}</div>
                  </div>
                  <div style="flex: 1">{{ item.placeName }}</div>
                  <div style="flex: 0.8">{{ item.placeType }}</div>
                  <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
                </div>
              </div>
            </template>
          </box-component>
        </div>
      </div>
      <div class="grow">
        <div class="table-box">
          <box-component title="返乡人员居住地分析">
            <template #content>
              <div class="line" style="font-size: 14px; font-weight:600;">
                <div style="flex: 0.5">序号</div>
                <div style="flex: 0.8">乡镇名称</div>
                <div style="flex: 0.8">返乡人数</div>
                <div style="flex: 1">居家隔离人数</div>
                <div style="flex: 1">集中隔离人数</div>
              </div>
              <div style="height: 90%; font-size: 14px; overflow: auto" id="tableList5">
                <div
                  :class="{ line: true, lineColor: index % 2 === 1 }"
                  v-for="(item, index) in tableData"
                  :key="index"
                  ref="tableRef"
                >
                  <div style="flex: 0.5" class="circle-box">
                    <div class="circle">{{ index + 1 }}</div>
                  </div>
                  <div style="flex: 0.5">{{ item.placeName }}</div>
                  <div style="flex: 0.8">{{ item.placeType }}</div>
                  <div style="flex: 1; color: #00EAFF">{{ item.total }}</div>
                  <div style="flex: 1; color: #FFD200">{{ item.yellows }}</div>
                </div>
              </div>
            </template>
          </box-component>
        </div>
        <div class="table-box">
          <box-component title="返乡人员核酸预警">
            <template #content>
              <div class="line" style="font-size: 14px; font-weight:600;">
                <div style="flex: 0.5">序号</div>
                <div style="flex: 1">乡镇名称</div>
                <div style="flex: 0.8">返乡人数</div>
                <div style="flex: 0.8">48小时内没做核酸人数</div>
              </div>
              <div style="height: 90%; font-size: 14px; overflow: auto" id="tableList6">
                <div
                  :class="{ line: true, lineColor: index % 2 === 1 }"
                  v-for="(item, index) in tableData"
                  :key="index"
                  ref="tableRef"
                >
                  <div style="flex: 0.5" class="circle-box">
                    <div class="circle">{{ index + 1 }}</div>
                  </div>
                  <div style="flex: 1">{{ item.placeName }}</div>
                  <div style="flex: 0.8">{{ item.placeType }}</div>
                  <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
                </div>
              </div>
            </template>
          </box-component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request.js";
import BoxComponent from '@/components/boxComponent.vue'
export default {
  components: {
    BoxComponent,
  },
  data() {
    return {
      // 表格数据
      tableData: [
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
      ]
    }
  },
  mounted() {
    this.autoScroll('#tableList1', 'timer1');
    this.autoScroll('#tableList2', 'timer2');
    this.autoScroll('#tableList3', 'timer3');
    this.autoScroll('#tableList4', 'timer4');
    this.autoScroll('#tableList5', 'timer5');
    this.autoScroll('#tableList6', 'timer6');
  },
  methods: {
    // 列表滚动方法
    autoScroll(id, timer) {
      const el = document.querySelector(id);
      const elHeight = el.offsetHeight;
      const sHeight = el.scrollHeight;
      if (this[timer]) {
        clearInterval(this[timer]);
      }
      this[timer] = setInterval(() => {
        if (el.scrollTop < sHeight - elHeight) {
          el.scrollTop++;
        } else {
          el.scrollTop = 0;
        }
      }, 100);
    }
  }
}
</script>

<style scoped lang="less">
// 布局样式
.container {
  box-sizing: border-box;
  display: flex;
  padding: 10px 20px 0;

  .grow {
    flex: 1;
    height: 100%;
    .table-box {
      height: 43vh;
      box-sizing: border-box;
      padding: 7px;
    }
  }
}

.double-box {
  display: flex;

  .item {
    flex: 1;
  }
}

.content-box {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .line {
    width: 1px;
    height: 71px;
  }
  .content-item {
    width: 153px;
    height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .content-desc {
      text-align: center;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
    }

    .count {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #00EAFF;
      span {
        font-size: 12px;
        color: #FFFFFF;
      }
    }
  }
}

// 表格样式
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}

.circle-box {
  display: flex;
  justify-content: center;
}

.circle {
  width: 21px;
  height: 21px;
  background-image: url('@/assets/circle.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
